<template>
<Modal :mask-closable="false" v-model="showPublish" @on-visible-change="(e) => {!e && $emit('closePublishModal', false);}" :width="500" title="发布" :footer-hide=true :draggable="true">
    <Form ref="create" :model="contentInfo" :rules="rules" :label-width="80"> 
        <FormItem label="医生" prop="doctor_id" required>
            <Select v-model="contentInfo.doctor_id" @on-change="changeDoctor" clearable  :filterable="doctorList.length>=10" @on-open-change="showAll" placeholder="请选择医生">
                <Option v-for="item in doctorList" :value="item.value" :key="item.value">{{item.label}}</Option>
            </Select>
        </FormItem>
        <FormItem label="平台账号" prop="account_ids" required>
            <CheckboxGroup v-model="contentInfo.account_ids">
                <template v-for="item in platList" :key="item.value">
                    <Checkbox :label="item.value"><span>{{item.label}}</span></Checkbox>
                </template>  
            </CheckboxGroup>
            <p v-if='!contentInfo.doctor_id'>请先选择医生</p>
            <p class="del" v-if='contentInfo.doctor_id&&platList.length==0'>该医生未绑定任何账号，请先绑定！</p>
        </FormItem>
        <FormItem label="发布日期" prop="date">
            <DatePicker v-model="contentInfo.publish_time" type="datetime" format="yyyy-MM-dd HH:mm" :options="options" placeholder="发布日期" style="width:100%;"/>
        </FormItem>
    </Form>
     <div slot="footer" style="text-align:right;">
        <Button type="default" @click="$emit('closePublishModal', false)" >取消</Button>
        <Button type="primary" @click="ok" :loading="btnLoading" style="margin-left:10px;">确定</Button>
    </div>
</Modal>
</template>  
<script>
    import {
    publishInfo,
    doctorAccountList,
    createPublish
    } from "@api/content.js";
    import dayjs from 'dayjs'
    export default {
        name: 'publish',
        props:["showPublish","contentId"],
        data () {
            return {
                doctorList:[],
                platList:[],
                btnLoading:false,
                contentInfo:{
                    content_id:'',
                    doctor_id:'',
                    account_ids:[],
                    publish_time:''
                },
                 rules: {
                    doctor_id: [
                        { required: true, message: '请选择医生' }
                    ],
                    account_ids: [
                        { required: true, message: '请选择平台账号' }
                    ],
                    publish_time: [
                        { required: true, message: '请选择发布日期' }
                    ]
                },
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
            }
                
        },
        watch:{
            showPublish(){
                if(this.showPublish){
                    this.contentInfo.content_id=this.contentId
                    this.doctorList=[]
                    this.platList=[]
                    this.$refs.create.resetFields();
                    this.getInfo()
                }
            }
        },
        methods:{
            showAll(e){
                if(e){
                    let downList=document.querySelectorAll('.ivu-select-dropdown-list .ivu-select-item')
                    downList.forEach(item => {
                        item.style.display='block'
                    });
                }
                    
            },
            addPulish(){
                this.btnLoading=true
                let params={
                    content_id:this.contentInfo.content_id,
                    doctor_id:this.contentInfo.doctor_id,
                    account_ids:this.contentInfo.account_ids,
                    publish_time:dayjs(this.contentInfo.publish_time).format('YYYY-MM-DD HH:mm')
                }
                createPublish(params).then(()=>{
                     this.btnLoading=false
                     this.$Message.success("发布成功");
                     this.$emit('closePublishModal', false,'add')
                     
                }).catch(()=>{
                    this.btnLoading=false
                })
            },
            changeDoctor(e){
                this.contentInfo.account_ids=[]
                this.platList=[]
                if(e){                    
                    doctorAccountList({doctor_id:e}).then(res=>{
                        this.platList=res
                    }).catch(()=>{

                    })
                }
                
            },
            getInfo(){
                publishInfo().then(res=>{
                    this.doctorList=res.doctor
                    this.contentInfo={
                        content_id:this.contentId,
                        doctor_id:'',
                        account_ids:[],
                        publish_time:''
                    }
                    this.contentInfo.publish_time=this.$Date().format('YYYY-MM-DD HH:mm');
                })
            },
            ok(){
                this.$refs.create.validate(valid => {
                    if(valid) {
                        this.addPulish()   
                    }else{
                        this.addModal = true
                        return;
                    }
                })
                
            }
        }
    } 
</script>